<template>
	<div v-loading='loading'>
		<div class="content-top">
			<span class="h1">报表查询</span>
			<span class="h2">未领取补偿人员统计表</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="fbhead">
				<p class="titlest">统计表6 （ {{proNames}}）项目征地拆迁 未领取补偿人员统计表 </p>
				<div class="left-content " style="margin-bottom: 20px;">
					<div class="clearfix">
						<!-- <p class="fl titles">未领取补偿人员统计表</p> -->
						<span>工程项目：</span>
						<el-select v-model="proValue" placeholder="请选择" filterable @change="changePro">
							<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
							</el-option>
						</el-select>
						<span style="margin-left: 20px;">行政区域</span>
						<el-cascader :options="regions" v-model="form.region" separator='-' change-on-select filterable clearable @change='handleItemChange()'></el-cascader>
						<!--<el-input v-model="search" placeholder="请输入内容" style="width:217px; margin-left: 15px;"></el-input>-->
						<el-button type="primary" @click='sear()'>查询</el-button>
						<el-button type="primary" @click='fnPrint()' v-show="userType==1||userType==2">打印</el-button>
						<span class="fr">{{datas | Format}}</span>
						<div class="fr" style="line-height: 40px;">
							<!--<span class="times">2018年4月6日</span>-->
						</div>
					</div>
				</div>
			</div>
			<div class="tables">
				<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>区域</th>
							<th>电话</th>
							<th>地块编号</th>
							<th>地类</th>
							<th>位置或桩号</th>
							<th>①土地面积㎡</th>
							<th>其中红线内㎡</th>
							<th>其中红线外㎡</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in tableData" :key="index">
							<td>{{index+1}}</td>
							<td>{{item.MainName}}</td>
							<td>{{item.RegionStr}}</td>
							<td v-if="item.Tel!='未填写'">{{item.Tel}}</td>
							<td v-else></td>
							<td>{{item.ItemCode}}</td>
							<td>{{item.ItemID}}</td>
							<td>{{item.PointCode}}</td>
							<td>{{item.Amount}}</td>
							<td>{{item.RedInSq}}</td>
							<td>{{item.RedOutSq}}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<div class="contens" style="margin-top: 20px;" id="print" v-show='false'>
			<div class="fbhead">
				<p class="titlest">统计表6 （ {{proNames}}）项目征地拆迁 未领取补偿人员统计表 </p>
				<div class="left-content " style="margin-bottom: 20px;">
					<div class="clearfix">
						<!-- <p class="fl titles">未领取补偿人员统计表</p> -->
						<label for="">工程项目:</label>
						<span style="display: inline-block; width: 220px;border: 1px solid #dcdfe6;border-radius: 5px;padding: 0px 7px;height: 30px;line-height: 30px;">{{gcxms}}</span>
						<label for="">行政区域:</label>
						<span style="display: inline-block; width: auto;border: 1px solid #dcdfe6;border-radius: 5px;padding: 0px 7px;height: 30px;line-height: 30px;">{{str}}</span>
						<!--<el-input v-model="search" placeholder="请输入内容" style="width:217px; margin-left: 15px;"></el-input>-->
						<el-button type="primary" @click='sear()'>查询</el-button>
						<el-button type="primary" @click='fnPrint()' v-show="userType==1||userType==2">打印</el-button>
						<span class="fr">{{datas | Format}}</span>
						<div class="fr" style="line-height: 40px;">
							<!--<span class="times">2018年4月6日</span>-->
						</div>
					</div>
				</div>
			</div>
			<div class="tables">
				<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>区域</th>
							<th>电话</th>
							<th>地块编号</th>
							<th>地类</th>
							<th>位置或桩号</th>
							<th>①土地面积㎡</th>
							<th>其中红线内㎡</th>
							<th>其中红线外㎡</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in tableData" :key="index">
							<td>{{index+1}}</td>
							<td>{{item.MainName}}</td>
							<td>{{item.RegionStr}}</td>
							<td v-if="item.Tel!='未填写'">{{item.Tel}}</td>
							<td v-else></td>
							<td>{{item.ItemCode}}</td>
							<td>{{item.ItemID}}</td>
							<td>{{item.PointCode}}</td>
							<td>{{item.Amount}}</td>
							<td>{{item.RedInSq}}</td>
							<td>{{item.RedOutSq}}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import api from "../../axios/api";
	export default {
		name: "UnLandReport",
		data() {
			return {
				datas: new Date(),
				proNames: "",
				loading: false,
				options: [],
				proValue: "",
				search: "", //搜索框
				regions: [], // 区域
				form: {
					region: []
				}, //区域数据
				tableData: [], // 未领取补偿人员统计表
				pages: 1, //翻页
				total: 1, //条数
				userType: 1,
				gcxms:'',
				vals:[],
				str:'',
			};
		},
		watch: {
			proValue: function(newVal, oldVal) {
				for(var i = 0; i < this.options.length; i++) {
					if(this.proValue == this.options[i].ID) {
						this.gcxms = this.options[i].Name
					}
				}
			},
			vals:function(newVal, oldVal){
				this.str = ''
				for(var i = 0;i<this.vals.length;i++){
					this.str+=this.vals[i].label+'-'
				}
				this.str = this.str.substring(0,this.str.length-1);
				console.log(this.str)
			}
		},
		filters: {
			Format: function(fmt) {
				if(fmt) {
					let date = new Date(fmt);
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					let s = date.getHours() // 小时
					let f = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()// 分
					let g = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds() // 秒
					return y + '-' + m + '-' + d + ' ' + s + ':' + f + ':' + g;
				} else {
					return ''
				}
			}
		},
		mounted() {},
		created() {
			setInterval(()=>{
				this.datas = new Date()
			},1000)
			this.userType = sessionStorage.UserType;
			this.getlistde();
		},
		methods: {
			getCascaderObj(val,opt) {
				console.log(val)
	            var s  = val.map(function (value, index, array) {
	                for (var itm of opt) {
	                    if (itm.value == value) { opt = itm.children; return itm; }
	                }
	                return null;
	            });
	            console.log(s)
	            return s
	        },
			handleItemChange() {
                    this.vals=this.getCascaderObj(this.form.region, this.regions);
            },
			//获取项目列表
			getlistde() {
				this.$post(api.getlistde).then(response => {
					if(response.isOK == true && response.state == 200) {
						this.options = response.Data;
						this.proNames = this.options[0] ? this.options[0].Name : "";
						this.proValue = this.options[0] ? this.options[0].ID : "";
						this.nopan();
						this.anonymousget(this.proValue)
					} else {
						this.loading = false;
						this.$message.error(response.msg);
					}
				}).catch((error) => {
					this.loading = false;
				})
			},
			anonymousget(val) {
				this.regions = [];
				this.form.region = [];
				if(!val) {
					return false;
				}
				this.$get(api.anonymousget + "/" + val)
					.then(response => {
						if(response.data.isOK == true && response.data.state == 200) {
							for(var i = 0; i < response.data.Data.length; i++) {
								this.regions.push({
									label: response.data.Data[i].RegionName,
									value: response.data.Data[i].ID,
									ParentID: response.data.Data[i].ParentID
								});
							}
							this.regions = this.$toTree(this.regions);
							this.form.region.push(this.regions[0].value);
							this.vals=this.getCascaderObj(this.form.region, this.regions);
						} else {
							this.$message.error(response.data.msg);
						}
					})
					.catch(error => {});
			},
			cascader() {},
			changePro() {
				if(this.proValue == "") {
					this.regions=[]
					this.form.region = [];
					return false
				}
				this.anonymousget(this.proValue)
			},
			sear() {
				this.pages = 1;
				this.nopan();
				for(let i = 0; i < this.options.length; i++) {
					if(this.proValue == this.options[i].ID) {
						this.proNames = this.options[i].Name;
					}
				}
			},
			handleCurrentChange(val) {
				this.pages = val;
				this.nopan();
			},
			//获取列表
			nopan() {
				this.loading = true;
				this.$post(api.nopan, {
					Para: {
						QueryKeyWord: this.search,
						RegionID: this.form.region[this.form.region.length - 1],
						ProjectID: this.proValue
					},
					PageSize: 10,
					PageIndex: this.pages - 1,
					OrderString: "",
					ToExcel: false
				}).then(res => {
					console.log(res);
					if(res.isOK == true && res.state == 200) {
						this.loading = false;
						this.tableData = res.Data.Data;
						this.total = res.Data.Items ? res.Data.Items : 1;
					} else {
						this.loading = false;
						this.$message.error(res.msg);
					}
				});
			},
			fnPrint() {
				$('.fbhead').css('paddingLeft', '90px')
				$('.tables').css('paddingLeft', '90px')
				$('.tables table').css('color','#000')
				$('.tables table td').css('borderColor', '#000')
				$('.tables table th').css('borderColor', '#000')
				setTimeout(function() {
					let subOutputRankPrint = document.getElementById("print");
					let newContent = subOutputRankPrint.innerHTML;
					let oldContent = document.body.innerHTML;
					document.body.innerHTML = newContent;
					window.print();
					window.location.reload();
					document.body.innerHTML = oldContent;
					return false;
				}, 0);
			}
		}
	};
</script>
<style scoped>
	.fbhead{
		min-width: 1500px;
	}
	.titlest {
		text-align: center;
		font-size: 20px;
		text-align: center;
		font-weight: 600;
		margin: 20px auto;
		color: #909399;
	}
	
	.titlest input {
		width: auto;
		border: 0;
		outline: none;
		font-size: 20px;
		text-align: center;
		font-weight: 600;
		color: #909399;
	}
	
	.times {
		display: inline-block;
		padding: 0 10px;
		line-height: 40px;
		font-size: 13px;
	}
	
	.tables {
		/* width: 100%; */
		min-width: 1500px;
	}
	
	.tables table {
		color: #606266;
		margin: auto;
		border-collapse: collapse;
		font-size: 12px;
	}
	
	.tables table td,
	.tables table th {
		text-align: center;
		padding: 5px;
		border: 1px solid #ebeef5;
	}
</style>